<template>
  <div class="content">
    <!--   本位币金额 摘要 弹窗-->
    <el-dialog
      v-dialogDrag
      :title="$t('menu.certificateDetail')"
      model
      :visible.sync="isclientlDialog"
      :close-on-click-modal="false"
      width="60%"
      :before-close="handleClose"
    >
      <div>
        <div class="header-name">
          <search :options="selectData" :msg="tacitly" :billtype-data="billtypeData" @seek="collect" @hand="queryTBdCustomerList" />
          <el-button type="primary" class="btn" size="mini" @click="queryTBdCustomerList">{{ $t('btn.search') }}</el-button>
        </div>
        <jc-table
          :table-data="closingData"
          :table-header="closingHeader"
          table-height="500px"
        >
          <el-table-column :label="$t('market.billType')" prop="billTypeName" align="center" width="100" />
          <el-table-column :label="$t('market.frombillNunber')" prop="frombillNo" align="center" width="120" />
          <el-table-column :label="$t('market.voucherNum')" prop="voucherNumber" align="center" width="120" />
          <el-table-column :label="$t('market.generateResults')" align="center" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isSuccess === 0" type="danger">{{ $t('market.defeated') }}</el-tag>
              <el-tag v-if="scope.row.isSuccess === 1" type="success">{{ $t('market.succeed') }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.relevantMsg')" prop="msg" align="center" />
        </jc-table>
        <jc-pagination
          :total="total"
          :page.sync="currentPage"
          :limit.sync="size"
          @pagination="queryTBdCustomerList"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryTaskVoucherDetails } from '@/api/financial/closing'
import search from '@/components/Search'
import searData from '@/components/Search/mixin'

export default {
  components: {
    search
  },
  mixins: [searData],
  props: {
    ftaskId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      ftype: 38,
      // 配置列表数据分页
      isclientlDialog: true,
      closingData: [],
      closingHeader: [],
      total: 0, // 总条目
      currentPage: 1, // 当前页
      size: 200 // 每页显示多少条数据
    }
  },
  created() {
    this.queryTBdCustomerList()
  },
  methods: {
    // 获取配置列表
    async queryTBdCustomerList() {
      const DATA = { ftaskId: this.ftaskId, pageNum: this.currentPage, pageSize: this.size, search: this.searCollData }
      queryTaskVoucherDetails(DATA).then((res) => {
        if (res.code === 0) {
          this.closingData = res.data.list
          this.total = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 返回数据
    confirmConfig() {
      this.$emit('task', this.fcalFmoney)
    },
    // 关闭前回调
    handleClose() {
      this.$emit('task', '')
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
  .header-name{
    position:relative;
    margin-bottom: 15px;
  }
  .btn{
    transform: translateY(18%);
    margin-left: 450px !important;
  }
  .money {
    display: flex;
    min-height: 400px;
    padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    .moneyLeft, .moneyRight {
      width: 50%;
    }
    .el-textarea::v-deep .el-textarea__inner {
      height: 150px;
    }
  }
}
</style>
